<script setup>
import http from '@/utils/http'

import axios from 'axios'

import { ref } from 'vue'

import dayjs from 'dayjs'
import calendar from 'dayjs/plugin/calendar' // ES 2015

import 'dayjs/locale/zh-cn' // 导入本地化语言
dayjs.locale('zh-cn') // 使用本地化语言
dayjs.extend(calendar)

console.log(dayjs)

let listArr = ref([])
let count = 1
let limitNum = 10

function loadList() {
  http({
    url: '/api/homework/list',
    method: 'get',
    params: { count, limitNum },
  }).then((r) => {
    console.log(r.data)
    listArr.value = r.data.data
  })
}
loadList()

let token = localStorage.getItem('homework-token')

let isLogin = ref(false)
if (token) {
  isLogin.value = true
}
function exitFn() {
  localStorage.removeItem('homework-token')
}

function formateTime(timeStr) {
  // return dayjs(timeStr).calendar(dayjs(new Date()))

  return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss')
}
function nextPage() {
  count++
  loadList()
}
function prevPage() {
  count--
  loadList()
}

let uncommitedHomeWorkStusArr = ref([])
function tongjiUnCommited() {
  let allStusArr = []
  let url = 'http://192.168.12.46:3001/api/homework/list'
  axios
    .get(url, {
      params: {
        count: 1,
        limitNum: 190,
      },
    })
    .then((r) => {
      console.log(r.data) //服务器返回的数据
      let arr = r.data.data //服务器返回的 作业数组
      let resArr = arr.filter((v) => {
        //  v.createdAt 日期字符串，转为日期对象
        let createdDate = new Date(v.createdAt) //文章的发布事件
        let now = new Date() //今天的日期对象
        if (now.getMonth() === createdDate.getMonth() && now.getDate() === createdDate.getDate()) {
          //满足条件，就过滤处理这个 v
          return true
        } else {
          return false
        }
      })
      //作业对象数组，映射成了  字符串数组（用户名）
      let commitedHomeWorkStusArr = resArr.map((v) => v.username)

      uncommitedHomeWorkStusArr.value = allStusArr.filter((v) => {
        //过滤 不在commitedHomeWorkStusArr 这里的，

        // 如果v不在commitedHomeWorkStusArr里面，返回 true
        if (commitedHomeWorkStusArr.indexOf(v) === -1) {
          return true //过滤这个元素
        } else {
          return false
        }
      })
      // console.log(uncommitedHomeWorkStusArr)
      // = uncommitedHomeWorkStusArr
    })
}

tongjiUnCommited()
</script>

<template>
  <h1>作业提交系统</h1>
  <div v-if="isLogin">
    <router-link to="/pub">发布作业 </router-link>
    <router-link to="/login" @click="exitFn">退出 </router-link>
  </div>
  <div v-else>
    <router-link to="/login">登录or注册 </router-link>
  </div>

  <h1>
    {{ uncommitedHomeWorkStusArr }}
  </h1>

  <div>
    <div v-for="(item, index) in listArr" :key="item.workId">
      <h2>{{ item.workTitle }}</h2>
      <span>{{ item.username }} </span><span>于{{ formateTime(item.createdAt) }}发布</span>
      <v-md-preview :text="item.workDesc"></v-md-preview>
    </div>
  </div>

  <button @click="prevPage()">上一页</button>
  <button @click="nextPage">下一页</button>
</template>
